<template>
    <div>
        <div class="title">
            <span>用户搜索</span>
        </div>
        <div class="containerS">
            <div class="search">
                <i class="el-icon-search"></i>
                <input class="input" type="text" v-model="name" @focus="setuser()"/>
                <span class="span" @click="getuser()">搜索</span>
            </div>
        </div>
        <div class="container4" v-show="Y"><!-- v-for="(value,index) in data" :key="index" -->
                <div class="tx">
                    <img src="../assets/logo.png" alt=""><!--src="data.img"-->
                </div>
                <div class="id">
                    <span>{{name}}</span><!--{{data.}}-->
                </div>
                <div class="kk">
                    <div class="a1">
                        <span class="top">10,000</span><!--{{data.bfw}}-->
                        <span class="bottom">被访问</span>
                    </div>
                    <div class="a2">
                        <span class="top">5,000</span><!--{{data.sc}}-->
                        <span class="bottom">收藏</span>
                    </div>
                </div>
                <div class="gz">
                    <i class="el-icon-thumb"></i>
                    <span>关注</span>
                </div>
            </div>
    </div>
</template>
<script>
    export default{
		data(){
			return{
				data:null,
                name:null,
                Y:false
			}
		},
        methods:{
            getuser(){
                this.Y=true
            },
            setuser(){
                this.Y=false
            }
        }
	}
</script>
<style scoped lang="scss">
    .title{
			width: 100%;
			height: 30px;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 40px;
			>span{
				text-align: center;
				line-height: 30px;
				font-size: 20px;
				color: #817c74;
			}
	}

    .containerS{
        width: 100%;
        height: auto;
        .search {
        height: 40px;
        width: 380px;
        margin: 0 auto;
        border: 1px solid rgb(181, 181, 181);
        background: linear-gradient(to right, white 50%, #fa7e3e 0);
        >i{
            margin-left: 5px;
            cursor: pointer;
        }
        >.input {
            position: relative;
            height: 38px;
            width: 300px;
            border: 1px solid rgb(181, 181, 181);
            border-left: currentColor;
            margin-left: 5px;
            top: -1px;
        }
        >.span {
            background-color: #fa7e3e;
            text-align: center;
            width: 40px;
            margin-left: 10px;
            &:hover {
                cursor: pointer;
            }
        }
    }
    }
    .container4{
		border: 1px solid #c3c3c3;
		width: 199px;
		height: 200px;
		padding-top: 5px;
		margin: 20px auto;
		background-color: rgb(238, 238, 238);
		>.tx{
			width: 50px;
			height: 50px;
			margin: 5px auto;
			img{
				width: 50px;
				height: 50px;
				border-radius: 50%;
			}
		}
		>.id{
			width: 100%;
			height: 21px;
			margin: 5px auto;
			margin-bottom: 30px;
			>span{
                display: block;
                text-align: center;
                margin: 0 auto;
				width: 100%;
			}
		}
		>.kk{
			display: flex;
			margin: 0 auto;
			>.a1{
				border: 1px solid #c3c3c3;
				border-right: currentColor;
				border-left: currentColor;
				width: 100px;
				height: auto;
				margin: 0 auto;
				>.top{
					text-align: center;
					display: block;
				}
				>.bottom{
					text-align: center;
					display: block;
					
				}
			}
			>.a2{
				border: 1px solid #c3c3c3;
				border-right: currentColor;
				width: 100px;
				height: auto;
				margin: 0 auto;
				>.top{
					text-align: center;
					display: block;
				}
				>.bottom{
					text-align: center;
					display: block;
					
				}
			}
		}
		>.gz{
			&:hover{
				cursor: pointer;
				background-color: #fa7e3e;
			}
			&:hover span{
				color: white;
			}
			&:hover i{
				color: white;
			}
			height: 46px;
			display: flex;
			justify-content: center;
			align-items: center;
			>i{
				color: #fa7e3e;
			}
			>span{
				width: 50%;
				display: block;
				text-align: center;
				color: #fa7e3e;
			}
		}
	}
</style>